<template>
	<view class="comp-player-panel">
		<!-- <view class="hd">{{player.nickname}}</view> -->
		<view class="equip-panel">
			<image class="face" src="../../static/warrior.png"></image>
			<view :class="['equip-box',`equip-${index+1}`]" v-for="(item,index) in 8" :key="index">
				<block v-for="(equip,equipIndex) in player.equip" :key="equip.uid">
					<comp-equip-item :equipDataVolume="equip" v-if="equip.region == (index+1)"  @contextmenu.native="take_off_equip(equip)"></comp-equip-item>
				</block>
				
			</view>
		</view>
		<view class="exp-progress">
			<comp-progress :size="15" activeColor="#191b1f" :percent="player.resource.exp / $formula.player_level_exp(player.lv) * 100"></comp-progress>
			<view class="text">{{player.resource.exp}} / {{$formula.player_level_exp(player.lv)}}</view>
		</view>
		<view class="player-attrs-panel">
			<view class="hd">
				<view class="item">基础属性</view>
				<view class="item">特殊属性</view>
			</view>
			<view class="bd">
				
				<view class="item">
					<view class="attr">
						<view class="label">等级</view><view class="value">{{player.lv}}</view>
					</view>
					<view class="attr">
						<view class="label">经验加成</view><view class="value">{{player.attr.exp_percent}}%</view>
					</view>
				</view>
				
				<view class="item">
					<view class="attr">
						<view class="label">血量</view><view class="value">{{player.attr.hp}}</view>
					</view>
					<view class="attr">
						<view class="label">金币加成</view><view class="value">{{player.attr.coin_percent}}%</view>
					</view>
				</view>
				
				<view class="item">
					<view class="attr">
						<view class="label">物攻</view><view class="value">{{player.attr.min_ac}}-{{player.attr.max_ac}}</view>
					</view>
					<view class="attr">
						<view class="label">固伤</view><view class="value">{{player.attr.fix_ac}}</view>
					</view>
				</view>
				
				<view class="item">
					<view class="attr">
						<view class="label">物防</view><view class="value">{{player.attr.min_def}}-{{player.attr.max_def}}</view>
					</view>
					<view class="attr">
						<view class="label">固防</view><view class="value">{{player.attr.fix_def}}</view>
					</view>
				</view>
				
				<view class="item">
					<view class="attr">
						<view class="label">攻速</view><view class="value">{{player.attr.spd}}</view>
					</view>
					<view class="attr">
						<view class="label">暴击</view><view class="value">{{player.attr.crit}}%</view>
					</view>
				</view>
				
				<view class="item">
					<view class="attr">
						<view class="label">吸血</view><view class="value">{{player.attr.suck_blood}}%</view>
					</view>
					<view class="attr">
						<view class="label">暴伤</view><view class="value">{{player.attr.crit_percent}}%</view>
					</view>
				</view>
				
				
				
				
			</view>

		</view>
		
		
	</view>
</template>

<script>
	import { mapState } from "vuex";
	import compProgress from "@/components/comp-progress/comp-progress.vue"
	import compEquipItem from "@/components/comp-equip-item/comp-equip-item"
	export default {
		name:"comp-player-panel",
		components:{
			compProgress,
			compEquipItem
		},
		computed : {
			...mapState(['mod_player']),
			player(){
				return this.mod_player.player
			}
		},
		data() {
			return {
				
			};
		},
		methods : {
			take_off_equip(equipDataVolume){
				this.$store.commit('mod_player/commit_take_off_equip',equipDataVolume)
			}
		}
	}
</script>

<style lang="scss">
	.comp-player-panel{
		background-color: $game-color-1;
		display: flex;
		flex-direction: column;
		.hd{
			height:30px;
			border-bottom: 1px solid #000;
			background-color: $game-color-2;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.equip-panel{
			height:300px;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			border-bottom: 1px solid #000;
			.face{
				width:260px;
				height:260px;
				-webkit-filter: drop-shadow(10px 10px 0 #21252b);
			}
			.equip-box{
				$boxSize:50px;
				$boxGap:20px;
				background-color: #21252b;
				width:$boxSize;
				height:$boxSize;
				border: 1px solid #000;
				position: absolute;
				border-radius: 4px;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				
				&.equip-1{ //武器
					left:$boxGap;
					top:$boxGap;
				}
				&.equip-2{ //衣服
					left:$boxGap;
					top:$boxSize + $boxGap * 2;
				}
				&.equip-3{ //手镯
					left:$boxGap;
					top:$boxSize * 2 + $boxGap * 3;
				}
				
				&.equip-4{ //戒指
					left:$boxGap;
					top:$boxSize * 3 + $boxGap * 4;
				}
				
				&.equip-5{ //头盔
					right:$boxGap;
					top:$boxGap;
				}
				
				&.equip-6{ //项链
					right:$boxGap;
					top:$boxSize + $boxGap * 2;
				}
				
				&.equip-7{ //腰带
					right:$boxGap;
					top:$boxSize * 2 + $boxGap * 3;
				}
				
				&.equip-8{ //鞋子
					right:$boxGap;
					top:$boxSize * 3 + $boxGap * 4;
				}
			}
		}
		.player-attrs-panel{
			background-color: $game-color-2;
			
			flex:1;
			.hd{
				display: flex;
				.item{
					flex:1;
					height:30px;
					display: flex;
					justify-content: center;
					align-items: center;
					&:first-child{
						border-right: 1px solid #000;
						box-sizing: border-box;
					}
				}
			}
			.bd{
				.item{
					height:30px;
					border-bottom: 1px solid #000;
					box-sizing: border-box;
					display: flex;
					.attr{
						flex:1;
						display: flex;
						&:first-child{
							border-right: 1px solid #000;
							height:30px;
						}
						.label{
							width:80px;
							height:30px;
							border-right: 1px solid #000;
							display: flex;
							justify-content: center;
							align-items: center;
						}
						.value{
							display: flex;
							align-items: center;
							padding-left:10px;
						}
						
					}
				}
			}
		}
		
		.exp-progress{
		
			overflow: hidden;
			border-bottom: 1px solid #000;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			.text{
				font-size:12px;
				transform:scale(0.8);
				color:#abb2bf;
				transform-origin:bottom center;
				position: absolute;
				bottom:1px
			}
		}
	}
</style>